<template>
  <div class="mall-header">
    <el-button type="primary">新增</el-button>
      <el-form :inline="true">
        <el-form-item label="请输入">
            <el-input placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="left" label="商品图片" min-width="100">
        <template #="scoped">
          <img :src="getImg(`ej`)" style="width: 50px;height: 50px;">
      </template>
      </el-table-column>
      <el-table-column 
      v-for="item in productLabel"
      :prop="item.prop" 
      :label="item.label" 
      :width='item.width?item.width:120' />
      <el-table-column fixed="right" label="操作" min-width="200">
        <template #="scoped">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
          <el-button type="danger" size="small">下架</el-button>
      </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="config.total" 
      size="small"
      @current-change="handleChange"
      class="page"
    />
  </div>
</template>

<script setup lang="js">
import { ref, reactive, toRefs, onMounted,getCurrentInstance} from 'vue'

const {proxy} = getCurrentInstance()
const tableData = ref([])
const productLabel = reactive([
  // {
  //   prop:'image',
  //   label:'商品图片'
  // },
  {
    prop:'name',
    label:'商品名称',
    width:200
  },
  {
    prop:'price',
    label:'商品价格'
  },
  {
    prop:'stock',
    label:'商品库存'
  },
  {
    prop:'sales',
    label:'商品销量'
  },
  {
    prop:'createTime',
    label:'创建时间',
    width:150
  },
  {
    prop:'publishTime',
    label:'发布时间',
    width:200
  },
])

const getImg = (product) => {
  return new URL(`../assets/images/${product}.jpg`,import.meta.url).href
}

// 定义获取数据的参数
const config = reactive({
    name:'',
    total:0,
    page:1
})
const getProductData = async ()=> {
  // 从api中获取数据
  let data = await proxy.$api.getProductData(config)
  // 将数据赋值给表单
  tableData.value = data.list
  config.total = data.count
  console.log(config.total)
}

onMounted(()=>{
  getProductData()
})
</script>


<style scoped lang="less">
.mall-header {
  display: flex;
  justify-content: space-between;
}
.table {
    position: relative;
    height: 620px;
    .page {
        position: absolute;
        right: 10px;
        bottom: 30px;
    }
}
.el-table {
  height: 600px;
}
</style>